<template>
	<view>
		
		<view class="logoBox" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<image class="logo" :src="props.imgUrl" mode="widthFix"></image>
			<view class="maodian" :style="`left:${logdata.leftN}px;top:${logdata.topN}px;width:${logdata.widthMd}px;height:${logdata.heightMd}px`"></view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		onShow,
		onReady,
		onReachBottom,
		onPullDownRefresh,
		onShareAppMessage
	}
	from '@dcloudio/uni-app';
	import {
		getCurrentInstance,
		ref,
		reactive,
		inject,
		provide,
		computed,
		defineProps,
		watch,
		nextTick,
		onMounted,
		defineExpose
	} from 'vue';

	const props = defineProps(['imgUrl']);
	const emit = defineEmits();

	
	// 定义子组件的数据和方法
	function onlogClear(){
		logdata.leftN = 0
		logdata.topN = 0
		logdata.widthMd = 0
		logdata.heightMd = 0
		emit('getPoint',{
			leftN:logdata.leftN,
			topN:logdata.topN,
			widthMd:logdata.widthMd,
			heightMd:logdata.heightMd
		})
	}
	defineExpose({
		onlogClear
	})


	let logdata = reactive({
		leftN: 0,
		topN: 0,
		widthMd: 0,
		heightMd: 0,
		startX: 0,
		startY: 0,
	})
	let isDragging = ref(false)

	function handleTouchStart() {
		let touch = event.touches[0];
		logdata.startX = touch.clientX - event.currentTarget .getBoundingClientRect().left
		logdata.startY = touch.clientY - event.currentTarget .getBoundingClientRect().top
	}
	
	function handleTouchMove(){
		let touch = event.touches[0];
		let right = touch.clientX - event.currentTarget.getBoundingClientRect().left
		let bottom = touch.clientY - event.currentTarget.getBoundingClientRect().top
		
		const logoBoxWidth = event.currentTarget.clientWidth;
		const logoBoxHeight = event.currentTarget.clientHeight;
		const boundaryMargin = 0; // 设置边界停止移动的边距
			
		logdata.widthMd = Math.round(Math.min(Math.abs(right - logdata.startX), logoBoxWidth));
		logdata.heightMd = Math.round(Math.min(Math.abs(bottom - logdata.startY), logoBoxHeight));
		
		logdata.leftN = Math.round(Math.min(
			Math.max(right > logdata.startX ? logdata.startX : right, 0),
			logoBoxWidth - logdata.widthMd - boundaryMargin
		));
				
		logdata.topN = Math.round(Math.min(
			Math.max(bottom > logdata.startY ? logdata.startY : bottom, 0),
			logoBoxHeight - logdata.heightMd - boundaryMargin
		));
		
		emit('getPoint',{
			leftN:logdata.leftN,
			topN:logdata.topN,
			widthMd:logdata.widthMd,
			heightMd:logdata.heightMd
		})
	}
	
	
	function handleTouchEnd(){
		// console.log(logdata)
	}
	
	
</script>

<style scoped lang="scss">
	.logoBox {
		width: 100%;
		position: relative;
		.logo {
			width: 100%;
			height: auto;
		}
		.maodian{
			border: 1px solid red;
			position:absolute;
			left: 0;
			top: 0;
		}
	}
</style>